<template>
  <div>
    <div class="box border-f0f ">
      <div class="trans"> this is App!</div>

    </div>
    <div class="color-red">
      打包之后的图片地址：{{img01}}
    </div>

    <img :src="img01"
         alt="img"
         height="300px">
    <div>
      这张图打包成base64格式
      <img :src="icon8k"
           alt="icon8k">
    </div>

    <div>
      <p>热模块替换测试：</p>
      <input type="text"
             v-model="content">
      <button @click="addTodo()">添加</button>
      <ul>
        <li v-for="(item,index) of todoData"
            :key="index">{{item}}</li>

      </ul>
    </div>
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>


  </div>
</template>

<script>
import img01 from './assets/images/img01.jpeg'
import icon8k from './assets/images/icon.png'

import './assets/styles/reset.css'
import './assets/styles/global.styl'
export default {
  name: "App",
  data () {
    return {
      img01: img01,
      icon8k: icon8k,
      todoData: ['todo--1', 'todo--2', 'todo--3'],
      content: ''
    }
  },
  created () {
    console.log(img01)
    console.log(icon8k)
  },
  methods: {
    addTodo () {
      if (this.content === '') {
        return
      }
      this.todoData.push(this.content)
      this.content = ''
    }
  }
}
</script>

<!-- lang="stylus" 指定样式使用stylus 格式 -->
<style lang="stylus" scoped>
.color-red {
  color: #74afff;
}

/* 像transform这种有浏览器前缀的，为了能够简化，
可以使用 autoprefixer 插件完成
*/
.trans {
  transform: translate(100px, 10px);
}

li:nth-of-type(odd) {
  color: #ffc337;
}
</style>